<template>
	<div class="bigScreenBodyDiv">
		<div class="bigScreenBodyDivMain">
			<div style="width: 100%;height: 100%;">
				<div class="home_div">

					<div class="line-post-page">
						<div ref="linePostPage"></div>
					</div>
					<div class="input-cascader">
						<el-select v-model="carChose" filterable remote reserve-keyword placeholder="请输入车牌号"
							:remote-method="remoteMethod" :loading="loading" @change="handleCarData1">
							<el-option v-for="item in options1" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>

					</div>
					<div class="input-select">
						<el-select v-model="curentQx" @change="handleQx">
							<el-option v-for="item in options2" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>

					</div>

					<div class="map-lengend" v-if="carComplete">
						<div class="lengend-item" v-for="(item, index) in Groups" :key="index"
							@click="changeLayer(item)">
							<span class="dot"
								:style="{ background: actives.includes(item.name) ? item.color : '#ffffff99' }"
								v-if="item.tag > 0"></span>
							<span>{{ item.name === '国三' ? '国三及以下' : item.name }}</span>
						</div>

					</div>
					<div class="map_menu1" v-if="carComplete">
						<el-radio-group v-model="layerShowType" size="mini" @change="changeLayerShowType">
							<el-radio-button label="baseDT">默认地图</el-radio-button>
							<el-radio-button label="satellite">卫星地图</el-radio-button>
						</el-radio-group>
					</div>

					<div class="map_left">

						<Car-Left-Page :isOpen="isOpen" :total="total" :css="'show'" @openFunc='openFunc'
							:leftstyle="'actual'"></Car-Left-Page>

					</div>
					<div class="map_right">
						<Car-Right-Page :isOpen="isOpen" :css="'show'" @openFunc='openFunc' :leftstyle="'actual'"
							@onMoveMap="parentMoveMap"></Car-Right-Page>
					</div>
					<div id="container"></div>

				</div>
			</div>
		</div>
		<!-- <companyDialog :tabsDialogParams="tabsDialogParams"></companyDialog> -->
		<!-- <carRecordDialog :carDialogParams="carDialogParams"></carRecordDialog> -->
		<!-- <My-Modal :info="info"></My-Modal>
		  -->
		<!-- <MyDialog :isShow="isShowMyDialog" :dataList="MyDiaList" @DiaClose="isShowMyDiaClose"></MyDialog> -->
		<My-Modal :info="info"></My-Modal>

	</div>
</template>




<script>
import { mapState } from "vuex";
import easeInOut from 'ol/easing'

import ScreenFull from '@/components/Screenfull/index.vue';
import companyDialog from '@/components/companyDialog/companyDialog.vue';
import * as echarts from 'echarts';
import XYZ from "ol/source/XYZ";
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import ImageLayer from 'ol/layer/Image.js';
import TileLayer from 'ol/layer/Tile.js';
import Projection from 'ol/proj/Projection.js';
import { fromLonLat, transform } from "ol/proj";
import Polygon from "ol/geom/Polygon"
import { Feature } from 'ol';
import TileState from 'ol/TileState'
import { Style, Stroke, Fill, Circle as CircleStyle, Text } from 'ol/style'
import Heatmap from 'ol/layer/Heatmap'; // 导入热力图层

import { Vector as SourceVector } from 'ol/source'
import { Group, Vector as LayerVector } from 'ol/layer'
import Point from 'ol/geom/Point';
import Icon from 'ol/style/Icon';
import Overlay from 'ol/Overlay';
import CarLeftPage from "@/components/MyLeftPage/CarLeftPage"
import CarRightPage from "@/components/MyRightPage/CarRightPage"

// import Circle from 'ol/geom/Circle';
import VectorLayer from 'ol/layer/Vector';
import { containsCoordinate } from 'ol/extent'
import MyDialog from '@/components/MyDialog/index'
import MyModal from "@/components/MyModal";

import { mapMutations, mapActions } from 'vuex'


import {
	getReportDataAndTop,
	getStageData,
	getWarningComData,
	getCity,
	getCompanyByDistrictCode,
	getNewCarRecord,
	vehicleBaseInfo,
	get24HourCar
} from '@/api/hzMJPT/mainInterface.js';
import { options } from "runjs";
const Colors = {
	'国三': '#f95454',
	'国四': '#ff9500',
	'国五': '#d4e607',
	'国六': '#07e7f3',
	'新能源': '#07e6ac',

}
export default {
	components: {
		ScreenFull,
		companyDialog,
		CarLeftPage,
		MyDialog,
		CarRightPage,
		MyModal
	},
	inject: ['reload'],
	data() {
		return {
			curentQx: undefined,
			options2: [],
			carComplete: false,
			actives: ['国三', '国四', '国五', '国六', '新能源'],
			GroupMap: { "国三": Colors['国三'], "国四": Colors['国四'], "国五": Colors['国五'], "国六": Colors['国六'], "新能源": Colors['新能源'] },
			Groups: [
				{
					name: '国三',
					color: Colors['国三'],
					tag: 1,
					params: {}
				},
				{
					name: '国四',
					color: Colors['国四'],
					tag: 1,
					params: {}
				},
				{
					name: '国五',
					color: Colors['国五'],
					tag: 1,
					params: {}
				},
				{
					name: '国六',
					color: Colors['国六'],
					tag: 1,
					params: {}
				}, {
					name: '新能源',
					color: Colors['新能源'],
					tag: 1,
					params: {}
				}],
			loading: false,
			total: 0,
			MyDiaList: {},
			map: null,
			carNames: [],
			carChose: [],
			isShowMyDialog: false,
			company: undefined,
			options: [],
			options1: [],

			isOpen: true,
			key: "d7a71c7ad105f0769725901b428c1a79",
			iconDevice: require("@/assets/icons/dianwei-1-qingdu.png"),
			overlay: undefined,
			defaultProps: {
				children: 'children',
				label: 'name',
				count: 'count'
			},
			map: undefined,
			searchQuery: '',
			enterprises: [
			],
			commonUrl: process.env.VUE_APP_COMMON_URL,
			isScreenFull: false,
			//数量展示
			lianwangCount: 9999,
			pingjiCount: 8888,
			shangbaojiluCount: 99.99,
			dangrishangbaoCount: 8888,
			//图形展示
			areaDataChart: null,
			industryDataChart: null,
			areaInlineDataChart: null,
			weekDataChart: null,
			todayInDataChart: null,
			stageDataChart: null,
			warningCarDataList: [],
			warningComDataList: [],

			//地图相关
			layerShowType: 'baseDT',
			EFshowType: false,
			layers: [],
			infowindowLayers: [],
			EFArray: [],
			EFPolygons: [],
			oldZoomLevel: 9,
			showLable: false,
			mainCenter: [88.68855806979309, 44.30680640080587],
			markers: [],
			districtSearch: null,
			companyTableList: [],
			currMarketData: null,
			currPolygon: null,
			hasOpenedEF: false,
			//企业详情弹窗
			tabsDialogParams: {
				dialogVisible: false,
				openType: null,
				objItem: null,
			},
			//车辆通行记录弹窗
			carDialogParams: {
				dialogVisible: false,
				objRecord: null,
			},
			//测试数据
			companyTableList: [
				{
					"id": 1,
					"comName": "测试企业",
					"longitude": 117.081338,
					"latitude": 39.146606,
					"ElectronicFence": [[117.081338, 39.146606], [117.080211, 39.146502], [117.08027, 39.145995], [117.081402, 39.146095]],
					"centerPoint": [117.081338, 39.146606],
					"area": "昌吉区",
					"instruct": "水泥",
					"grade": "A",
					"PWcode": "123456789123456789",
					"lianxiren": "王主任",
					"tel": "15812345678",
					"address": "昌吉市金霞路18号",
					"enterList": [
						{
							"enterName": "东门",
							"longitude": 117.081338,
							"latitude": 39.146206,
							"enterPoint": [117.081338, 39.146206],
						},
						{
							"enterName": "西门",
							"longitude": 117.081338,
							"latitude": 39.146206,
							"enterPoint": [117.080028, 39.146206],
						}

					]
				},

			],
		}
	},
	created() {
		//this.initWebSocket();
	},
	beforeDestroy() {
		if (this.map) {
			// 移除地图上的所有图层
			this.map.getLayers().clear();
			// 卸载地图
			this.map.setTarget(null);
			// 销毁地图实例
			this.map = null;
		}
	},
	mounted() {
		const that = this
		window.carscreen = that

		const p1 = getCity().then((data) => {
			const promises = data.data.map((e) => {
				let city = {
					name: e.district,
					value: e.districtCode,
					label: e.district,
					districtCode: e.districtCode,
					geojson: JSON.parse(e.geoJson).coordinates,
					children: []
				};

				return getCompanyByDistrictCode(e.districtCode).then((companyData) => {
					companyData.data.forEach((company) => {
						let company1 = {
							regionId: company.regionId,
							value: company.regionId,
							label: company.regionName,
							name: company.regionName,
							geom: company.geoJson,
							detailedAddress: company.detailedAddress
						};
						city.children.push(company1);
					});
					city.count = city.children.length;
					return city;
				});
			});

			return Promise.all(promises).then((cities) => {
				that.enterprises = cities;
				let ll = cities.map(v => { return { label: v.label, value: v.value } })
				ll.unshift({ label: "全州", value: 'qz' });
				that.options2 = ll
				this.curentQx = 'qz'
				this.SET_DATASCOPE({
					region: this.curentQx,
					options: that.optio
				});
				that.options = cities
				return cities;
			});
		})
		const p2 = that.initMap()

		Promise.all([p1, p2]).then(() => {
			this.LinePostPage(this.$refs.linePostPage)

			that.initCompanyIcon()

			that.getData()

		});

	},
	computed: {
		...mapState({
			info: (state) => state.map.search,
			dataScope: (state) => state.map.DataScope,
		}),
		searchRegion() {
			if (this.dataScope.region == 'qz') {
				return {}
			} else {
				let res = this.options2.find(v => v.value == this.dataScope.region)
				return { regionName: res.label, regionId: res.value };
			}
		},
		filteredEnterprises() {
			if (!this.searchQuery) {
				return this.enterprises;
			}
			return this.enterprises.filter(enterprise => {
				let f = enterprise.name.toLowerCase().includes(this.searchQuery.toLowerCase())

				let s = false

				if (enterprise.children != undefined) {
					for (let child of enterprise.children) {

						s = child.name.toLowerCase().includes(this.searchQuery.toLowerCase())
						if (s) {

							break
						}
					}
				}
				return f || s

			});
		}
	},
	methods: {
		getData() {
			let that = this

			getNewCarRecord(this.searchRegion).then(data => {
				// 数据预处理：提取坐标点
				this.total = data.total
				// 映射为plate_no数组
				let g3 = []
				let g4 = []
				let g5 = []
				let g6 = []
				let xny = []
				const allPoints = data.data.forEach(e => {
					const [x, y] = fromLonLat([e.geoJson.coordinates[0], e.geoJson.coordinates[1]]);
					if (e.standardEmission == null) {
						g5.push(new Feature({
							geometry: new Point([x, y]),
							originalData: e,
							weight: 1 // 热力图权重
						}))
					} else if (e.standardEmission == '国三' || e.standardEmission == 'g3') {

						g3.push(new Feature({
							geometry: new Point([x, y]),
							originalData: e,
							weight: 1 // 热力图权重
						}))
					} else if ((e.standardEmission == '国四' || e.standardEmission == 'g4')) {
						g4.push(new Feature({
							geometry: new Point([x, y]),
							originalData: e,
							weight: 1 // 热力图权重
						}))
					} else if ((e.standardEmission == '国五' || e.standardEmission == 'g5')) {
						g5.push(new Feature({
							geometry: new Point([x, y]),
							originalData: e,
							weight: 1 // 热力图权重
						}))
					} else if (e.standardEmission == '国六' || e.standardEmission == 'g6') {
						g6.push(new Feature({
							geometry: new Point([x, y]),
							originalData: e,
							weight: 1 // 热力图权重
						}))
					} else if ((e.standardEmission == '新能源' || e.standardEmission == 'xny')) {
						xny.push(new Feature({
							geometry: new Point([x, y]),
							originalData: e,
							weight: 1 // 热力图权重
						}))
					}

				});

				// 共享数据源
				const sourceg3 = new SourceVector({
					features: g3
				});
				const sourceg4 = new SourceVector({
					features: g4
				});

				const sourceg5 = new SourceVector({
					features: g5
				});


				const sourceg6 = new SourceVector({
					features: g6
				});

				const sourcexny = new SourceVector({
					features: xny
				});


				// 配置参数
				const config = {
					// 基础点配置
					point: {
						radius: 4.5,                 // 点半径
						color: 'rgba(51, 255, 153)' // 点颜色
					},
					// 热力图配置
					heatmap: {
						radius: 7,
						blur: 12,
						gradient: [
							'rgba(0, 0, 255, 0)',
							'rgba(0, 0, 255, 0.3)',
							'rgba(0, 128, 255, 0.5)',
							'rgba(0, 255, 0, 0.6)',
							'rgba(255, 255, 0, 0.7)',
							'rgba(255, 128, 0, 0.8)',
							'rgba(255, 0, 0, 0.9)'
						],
						minZoom: 7,
						maxRadiusAtMinZoom: 5,
						minWeightAtMinZoom: 0.3
					},
					// 切换阈值
					switchZoom: 16
				};

				let GroupMap = this.GroupMap
				const pointLayerg3 = new LayerVector({
					source: sourceg3,
					style: new Style({
						image: new CircleStyle({
							radius: config.point.radius,
							fill: new Fill({ color: GroupMap['国三'] }),
						}),
						zIndex: 39
					})
				});

				const pointLayerg4 = new LayerVector({
					source: sourceg4,
					style: new Style({
						image: new CircleStyle({
							radius: config.point.radius,
							fill: new Fill({ color: GroupMap['国四'] }),
						}),
						zIndex: 39
					})
				});


				const pointLayerg5 = new LayerVector({
					source: sourceg5,
					style: new Style({
						image: new CircleStyle({
							radius: config.point.radius,
							fill: new Fill({ color: GroupMap['国五'] }),
						}),
						zIndex: 39
					})
				});


				const pointLayerg6 = new LayerVector({
					source: sourceg6,
					style: new Style({
						image: new CircleStyle({
							radius: config.point.radius,
							fill: new Fill({ color: GroupMap['国六'] }),
						}),
						zIndex: 39
					})
				});


				const pointLayerxny = new LayerVector({
					source: sourcexny,
					style: new Style({
						image: new CircleStyle({
							radius: config.point.radius,
							fill: new Fill({ color: GroupMap['新能源'] }),
						}),
						zIndex: 39
					})
				});

				if (this.pointLayerg3) {
					this.map.removeLayer(this.pointLayerg3)
				}


				if (this.pointLayerg4) {
					this.map.removeLayer(this.pointLayerg4)
				}


				if (this.pointLayerg5) {
					this.map.removeLayer(this.pointLayerg5)
				}


				if (this.pointLayerg6) {
					this.map.removeLayer(this.pointLayerg6)
				}

				if (this.pointLayerxny) {
					this.map.removeLayer(this.pointLayerxny)
				}


				this.pointLayerg3 = pointLayerg3
				this.pointLayerg4 = pointLayerg4
				this.pointLayerg5 = pointLayerg5
				this.pointLayerg6 = pointLayerg6
				this.pointLayerxny = pointLayerxny
				if (this.actives.includes('国四')) {
					that.map.addLayer(pointLayerg4);

				} if (this.actives.includes('国三')) {

					that.map.addLayer(pointLayerg3);
				}

				if (this.actives.includes('国五')) {
					that.map.addLayer(pointLayerg5);

				} if (this.actives.includes('国六')) {
					that.map.addLayer(pointLayerg6);

				} if (this.actives.includes('新能源')) {
					that.map.addLayer(pointLayerxny);

				}


				const baseRadius = config.point.radius;
				const minRadius = 6;

				// 监听地图缩放变化，更新点大小
				// that.map.getView().on('change:resolution', () => {
				// 	updatePointSize();
				// });
				// updatePointSize();

				// function updatePointSize() {
				// 	const zoom = that.map.getView().getZoom();
				// 	const mapMinZoom = that.map.getView().getMinZoom() || 0;
				// 	const mapMaxZoom = that.map.getView().getMaxZoom() || 28;

				// 	// 计算当前缩放级别对应的半径
				// 	const scaleFactor = (zoom - mapMinZoom) / (mapMaxZoom - mapMinZoom);
				// 	const radius = Math.max(minRadius, baseRadius * scaleFactor);
				// 	// 更新样式中的半径
				// 	pointStyle.getImage().setRadius(radius);

				// 	// 强制图层重绘
				// 	pointLayer.changed();
				// }
				that.map.on("click", function (e) {
					var pixel = that.map.getEventPixel(e.originalEvent);
					var feature = that.map.forEachFeatureAtPixel(pixel, function (feature, layer) {
						// 只处理基础点图层的要素
						if ((layer === that.pointLayerg3 || layer === that.pointLayerg4 || layer === that.pointLayerg5 || layer === that.pointLayerg6 || layer === that.pointLayerxny)) {
							return feature;
						}
					});

					if (feature) {
						// 获取原始数据
						const originalData = feature.get('originalData');
						that.handleCarData(originalData)
					}
				});

				// 初始调用
				// updateLayers();
				this.carComplete = true

			})

		},
		handleQx() {
			this.SET_DATASCOPE({
				region: this.curentQx,
				options: this.options
			});
			this.getData()
			this.LinePostPage(this.$refs.linePostPage)

		},
		parentMoveMap(data) {

			function calculateCentroid(coordinates) {
				let sumX = 0;
				let sumY = 0;
				const points = coordinates[0][0]; // 提取实际的坐标点数组

				for (const point of points) {
					sumX += point[0]; // 经度
					sumY += point[1]; // 纬度
				}

				return {
					lon: sumX / points.length,
					lat: sumY / points.length
				};
			}

			data = JSON.parse(data);
			const { lon, lat } = calculateCentroid(data.coordinates)
			let re = new Point(fromLonLat([lon, lat])).flatCoordinates
			this.map.getView().animate({
				center: re,
				zoom: 14,
				duration: 1500,
				easing: easeInOut
			});
		},
		activateLayer() {

		},
		changeLayer(e) {
			if (this.actives.includes(e.name)) {
				this.actives.splice(this.actives.indexOf(e.name), 1)
				if (e.name == "国三") {
					this.map.removeLayer(this.pointLayerg3);
				} else if (e.name == "国四") {
					this.map.removeLayer(this.pointLayerg4);

				} else if (e.name == "国五") {
					this.map.removeLayer(this.pointLayerg5);

				} else if (e.name == "国六") {
					this.map.removeLayer(this.pointLayerg6);

				} else if ((e.name == "新能源")) {

					this.map.removeLayer(this.pointLayerxny);
				}

			} else {
				this.actives.push(e.name)
				if (e.name == "国三") {
					this.map.addLayer(this.pointLayerg3);
				} else if (e.name == "国四") {
					this.map.addLayer(this.pointLayerg4);

				} else if (e.name == "国五") {
					this.map.addLayer(this.pointLayerg5);

				} else if (e.name == "国六") {
					this.map.addLayer(this.pointLayerg6);

				} else if ((e.name == "新能源")) {
					this.map.addLayer(this.pointLayerxny);
				}


			}
		},
		handleCarData(data) {
			this.SET_SEARCH({
				show: true,
				carData: data.vuid,
			});

		},
		handleCarData1() {
			this.SET_SEARCH({
				show: true,
				carData: this.carChose,
			});

		},
		remoteMethod(query) {
			if (query !== '') {
				this.loading = true;
				vehicleBaseInfo({ plateNo: query }).then(res => {
					this.loading = false;
					this.options1 = res.data.filter(item => item.plateNo !== null) // 过滤掉plate_no为null的元素
						.reduce((acc, item) => {
							// 检查是否已存在相同plateNo的项
							const exists = acc.some(option => option.label === item.plateNo);
							if (!exists) {
								acc.push({
									value: item.pid,
									label: item.plateNo
								});
							}
							return acc;
						}, []);
				})
			} else {
				this.options1 = [];
			}
		},
		...mapMutations("map", [
			"SET_SEARCH", "SET_DATASCOPE"
		]),
		LinePostPage(ref) {
			let that = this;
			get24HourCar(this.searchRegion).then(res => {
				// 模拟24小时数据
				let data = res.data;

				function generateHourRange() {
					const now = new Date();
					const twentyFourHoursAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);

					const startDate = twentyFourHoursAgo.getDate();
					const endDate = now.getDate();
					const startHour = twentyFourHoursAgo.getHours();
					const endHour = now.getHours();

					// 生成从startHour到endHour的小时数组，考虑跨天情况
					const hours = [];

					if (startDate === endDate) {
						// 同一天的情况
						for (let i = startHour; i <= endHour; i++) {
							hours.push(`${i}:00`);
						}
					} else {
						// 跨天的情况

						// 处理第一天的剩余小时
						for (let i = startHour; i < 24; i++) {
							hours.push(`${i}:00`);
						}

						// 处理中间的完整天（如果有）
						let currentDate = new Date(twentyFourHoursAgo);
						currentDate.setDate(currentDate.getDate() + 1);

						while (currentDate.getDate() < endDate) {
							for (let i = 0; i < 24; i++) {
								hours.push(`${i}:00`);
							}
							currentDate.setDate(currentDate.getDate() + 1);
						}

						// 处理最后一天（今天）的小时
						for (let i = 0; i <= endHour; i++) {
							hours.push(`${i}:00`);
						}
					}

					return hours;
				}

				// 使用示例
				const hours = generateHourRange();

				// 按小时索引匹配数据（假设后端数据按日期排序）
				const countByHour = [];
				const recordsByHour = [];

				// 处理后端返回的车辆总数数据
				if (data.carNum && data.carNum.length > 0) {
					data.carNum.forEach(item => {
						// 假设 item.day 格式为 "时:00"，例如 "8:00"
						countByHour.push(item.value);
					});
				}

				// 处理后端返回的活跃车辆数据
				if (data.carActiveNum && data.carActiveNum.length > 0) {
					data.carActiveNum.forEach(item => {
						recordsByHour.push(item.value);

					});
				}

				// 更新页面数据
				that.LinePostPageDate = {
					hourTime: hours,
					vehicleCount: countByHour,
					vehicleRecords: recordsByHour
				};

				let myChart3 = echarts.init(ref);
				let Opt = {
					title: {
						text: '24小时实时数据',
						textStyle: {
							color: '#e9eef3',
							fontSize: 18,
							lineHeight: 18,
							fontWeight: 'normal',
							fontFamily: 'Microsoft YaHei',
							overflow: 'truncate',
							width: 150,
						},
						padding: [1, 0, 0, 9]
					},
					tooltip: {
						show: true,
						trigger: 'axis',
						renderMode: 'html',
						backgroundColor: '#00000044',
						borderWidth: 0,
						width: 150,  // 固定宽度
						height: 80,  // 固定高度
						// 其他配置...
						// extraCssText: 'box-shadow: 0 0 6px 2px #098e8d;',
						extraCssText: 'height: 80px; width:300px; overflow-y: auto;', // 强制设置高度（配合滚动条）
						formatter(params, ticket, callback) {
							let htmlStr = '';
							let units = ['辆', '辆'];
							for (let i = 0; i < params.length; i++) {
								if (params[i].data !== null) {
									let param = params[i];
									let seriesName = param.seriesName;
									let value = param.value;
									// let color = param.color;
									let color = "white";

									htmlStr += `
								<span style="font-size: 14px!important;color:${color}!important;">
									${seriesName}
                  ${value}
				  (${units[i]})
                </span>
          `;
								}
							}
							return htmlStr;
						}
					},
					dataZoom: [{
						type: 'inside',
					}, {
						showDetail: false,
						showDataShadow: false,
						type: 'inside',
						show: true,
						height: 9,
						backgroundColor: '#0c2b4f',
						fillerColor: '#707086',
						borderColor: 'transparent',
						handleStyle: {
							opacity: 0,
						},
						moveHandleStyle: {
							color: '#707086',
							borderColor: 'transparent',
							borderWidth: 0,
							opacity: 1,
						},
						textStyle: {
							show: false
						},
						realtime: true,
						start: 50,
						end: 100,
						minSpan: 50,
						maxSpan: 50,
						left: 0,
						right: 0,
						bottom: 7,
						brushSelect: false,
					}],
					legend: {
						type: 'plain',
						icon: 'circle',
						top: 10,  // 调整位置
						right: 10,  // 调整位置
						width: 'auto',  // 自动宽度
						align: 'left',
						itemGap: 29,
						itemWidth: 13,
						itemHeight: 13,
						textStyle: {
							color: '#ffffff',
							padding: [2, 0, 0, 5],
							rich: {
								a: {
									fontSize: 12,
								}
							},
						},
						formatter(pars) {
							return `{a|${pars}}`;
						},
						data: ['车辆数', '车辆活动数'],
						selectedMode: 'multiple',
						selected: {
							'车辆数': true,
							'车辆活动数': false
						},
						tooltip: {
							show: true
						}
					},
					grid: {
						left: '0%',
						right: '0%',
						bottom: 31,
						top: 36,
						containLabel: true,
					},
					xAxis: {
						show: true,
						type: 'category',
						axisTick: {
							"show": false
						},
						axisLabel: {
							color: "#ffffff",
							margin: 12,
							fontSize: 14,
						},
						axisPointer: {
							show: true,
							type: 'shadow',
							label: {
								show: false
							},
							shadowStyle: {
								color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{ offset: 1, color: "#0439ca00" },
									{ offset: 0.6, color: "#10c2d7" },
									{ offset: 0.3, color: "#1079eb" },
									{ offset: 0, color: "#1065f1" }
								]),
								opacity: 0.2
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#e5edf733',
								width: 1,
								type: 'dotted',
							}
						},
						data: that.LinePostPageDate.hourTime,
					},
					yAxis: {
						type: 'value',
						splitLine: {
							lineStyle: {
								width: 1,
								type: 'dotted',
								color: '#e5edf733'
							}
						},
						axisLabel: {
							show: true,
							color: "#ffffff",
							fontSize: 12,
						},
					},
					series: [
						{
							name: '车辆数',
							type: 'bar',
							data: that.LinePostPageDate.vehicleCount,
							itemStyle: {
								// 霓虹蓝渐变（从亮到暗）
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{ offset: 0, color: '#00F7FF' }, // 高亮蓝
										{ offset: 1, color: '#0066FF' }  // 深蓝
									]
								),
								shadowBlur: 10, // 添加发光效果
								shadowColor: 'rgba(0, 247, 255, 0.5)'
							},
							emphasis: {
								// 悬停时更亮的渐变
								itemStyle: {
									color: new echarts.graphic.LinearGradient(
										0, 0, 0, 1,
										[
											{ offset: 0, color: '#66FFFF' }, // 更亮的蓝
											{ offset: 1, color: '#0099FF' }  // 亮蓝
										]
									)
								}
							}
						},
						{
							name: '车辆活动数',
							type: 'line',
							symbolSize: 9,
							data: that.LinePostPageDate.vehicleRecords,
							// 赛博粉 + 发光效果
							itemStyle: {
								color: '#FF00FF', // 亮粉色
								borderColor: '#FF99FF', // 浅粉描边
								borderWidth: 3,
								shadowBlur: 10,
								shadowColor: 'rgba(255, 0, 255, 0.5)'
							},
							lineStyle: {
								color: '#FF00FF',
								width: 3,
								shadowBlur: 10, // 线条发光效果
								shadowColor: 'rgba(255, 0, 255, 0.5)'
							},
							emphasis: {
								itemStyle: {
									color: '#FF66FF',
									borderWidth: 4
								},
								lineStyle: {
									width: 4,
									shadowBlur: 15,
									shadowColor: 'rgba(255, 0, 255, 0.8)'
								}
							},
							// 添加特效线
							showSymbol: true,
							animationDuration: 2000,
							animationEasing: 'elasticOut'
						}
					]
				};
				myChart3.setOption(Opt);

				// 窗口大小变化时重绘图表
				window.addEventListener('resize', () => {
					myChart3.resize();
				});
			})

		},
		changeCompany(data) {
			if (this.isShowMyDialog) return
			this.$nextTick().then(() => {
				this.isShowMyDialog = true;
				this.MyDiaList = { regionId: data[1] };
			});

		},
		...mapMutations('map', ['SET_SEARCH']),
		isShowMyDiaClose() {
			this.isShowMyDialog = false
		},
		openFunc() {
			/*左侧展开收起事件*/
			this.isOpen = !this.isOpen
		},
		initCompanyIcon() {
			const that = this
			let s = []
			let s1 = []

			that.enterprises.forEach(e => {
				const coordinates = e.geojson[0][0].map(([lng, lat]) => fromLonLat([lng, lat]));
				const polygonGeometry = new Polygon([coordinates]);

				const polygonFeature = new Feature({
					geometry: polygonGeometry
				});

				const polygonStyle = new Style({
					// stroke: new Stroke({
					// 	// color: '#74F4F9',
					// 	color: 'rgba(223,153,54)',
					// 	width: 2.2
					// }),
					// fill: new Fill({
					// 	color: 'rgba(0, 255, 255, 0.4)'
					// 	// color: 'rgba(247, 247, 247)'

					// })
					stroke: new Stroke({
						// color: 'rgb(7, 245, 197)',
						width: 1,
						color: 'rgb(139, 229, 250)',

						lineDash: [5, 5]
					}),
					fill: new Fill({
						color: 'rgba(0, 255, 255,0.1)'
					}),
				});

				polygonFeature.setStyle(polygonStyle);

				const vectorSource = new SourceVector({
					features: [polygonFeature]
				});

				const vectorLayer = new LayerVector({
					source: vectorSource
				});

				that.map.addLayer(vectorLayer);


				e.children.forEach(e => {


					function calculateCentroid(coordinates) {
						let sumX = 0;
						let sumY = 0;
						const points = coordinates[0][0]; // 提取实际的坐标点数组

						for (const point of points) {
							sumX += point[0]; // 经度
							sumY += point[1]; // 纬度
						}

						return {
							lon: sumX / points.length,
							lat: sumY / points.length
						};
					}
					if(e.geom == null){
						return
					}
					const { lon, lat } = calculateCentroid(e.geom.coordinates)
					// const lon = e.geom.coordinates[0][0][0][0];
					// const lat = e.geom.coordinates[0][0][0][1];
					const iconFeature = new Feature({
						geometry: new Point(fromLonLat([lon, lat])),
						name: e.name,
						address: e.detailedAddress,
						regionId: e.regionId
					});
					const innerPolygonCoordinates1 = e.geom.coordinates[0][0].map(([lng, lat]) => {
						const c = fromLonLat([lng, lat]);

						return c;
					});

					s.push(innerPolygonCoordinates1)
					// const icon = new Icon({
					// 	anchor: [0.5, 1],
					// 	src: that.iconDevice,
					// 	scale: 0.9,

					// })
					const iconStyle = new Style({
						text: new Text({
							text: e.name, // 企业名称
							font: '14px Arial', // 字体样式
							fill: new Fill({ color: '#FFFFFF' }), // 文本颜色
							stroke: new Stroke({ color: '#000000', width: 1 }), // 文本描边（提高可读性）
							// offsetY: -45, // 文本在 Y 轴上的偏移（负值表示向上）
							textAlign: 'center', // 文本对齐方式
							// backgroundFill: new Fill({ color: 'rgba(0, 0, 0, 0.7)' }), // 文本背景
							padding: [5, 10, 5, 10],// 文本内边距 [上, 右, 下, 左]
						})
					});

					iconFeature.setStyle(iconStyle);

					const vectorSource_ = new SourceVector({
						features: [iconFeature]
					});

					const vectorLayer_ = new LayerVector({
						source: vectorSource_,
						visible: false
					});

					s1.push(vectorLayer_)




				})

			})

			const polygons = s.map(coords => new Polygon([coords]));


			const source = new SourceVector({
				features: polygons.map(polygon => {
					const feature = new Feature({
						geometry: polygon
					});
					return feature;
				})
			});

			// 创建样式
			const style = new Style({
				stroke: new Stroke({
					color: '#00FFFF',
					width: 3
				}),
				// fill: new Fill({
				// 	color: 'rgba(7, 43, 76, 0.3)'
				// }),
				// stroke: new Stroke({
				// 	color: 'rgba(134,63,192)',
				// 	width: 4
				// }),
				// fill: new Fill({
				// 	color: 'rgba(12,73 172)'
				// })
			});

			// 创建矢量图层
			const vectorLayer = new LayerVector({
				source: source,
				style: style
			});

			// 添加图层到地图
			that.map.addLayer(vectorLayer);

			s1.forEach(vectorLayer_ => {
				that.map.addLayer(vectorLayer_);
				that.map.getView().on('change:resolution', function () {
					const zoom = that.map.getView().getZoom();
					// 只在缩放级别≥8时显示
					vectorLayer_.setVisible(zoom >= 14);
				});
			})
			that.map.on("click", function (e) {
				var pixel = that.map.getEventPixel(e.originalEvent);
				var currentLayer = null
				var feature = that.map.forEachFeatureAtPixel(pixel, function (feature, layer) {
					currentLayer = layer;
					return feature;
				})
				if (feature != undefined && feature.get('regionId') != undefined) {
					// if (that.overlay && feature.get('regionId') == that.overlay.get('regionId')) {
					// 	return
					// }
					that.map.removeOverlay(that.overlay)
					that.openInfoWindow(feature)
				} else {
					if (that.overlay == undefined) {
						return
					}
					that.map.removeOverlay(that.overlay)
				}
			})
			that.initMark()


		}, handleNodeClick(node, data) {
			this.$nextTick().then(() => {
				if (data.regionId == null) return;
				this.isShowMyDialog = true;
				this.MyDiaList = { regionId: data.regionId };
			});

		},

		initTiandituMap() {
			const url_Vector = 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=indigo&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + this.key
			// const url_Vector = 'http://t0.tianditu.com/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=indigo&TILEMATRIXSET=c&FORMAT=tiles&x={x}&y={y}&l={z}&tk='+ this.key
			const that = this;
			// const url_Vector = "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&style=indigo&tk=" + this.key
			// function modifyTileColor(image, options = {}) {
			// 	const canvas = document.createElement('canvas');
			// 	canvas.width = image.width;
			// 	canvas.height = image.height;
			// 	const ctx = canvas.getContext('2d');

			// 	// 绘制原始图像
			// 	ctx.drawImage(image, 0, 0);

			// 	// 获取图像数据
			// 	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
			// 	const data = imageData.data;
			// 	const width = canvas.width;
			// 	const height = canvas.height;

			// 	// 配置选项
			// 	const targetColorToReplace = options.targetColorToReplace || { r: 245, g: 244, b: 238 };
			// 	const targetReplacementColor = hexToRgb(options.targetReplacementColor || '#172349');
			// 	const backgroundColor = hexToRgb(options.backgroundColor || '#051223'); // 新的背景颜色
			// 	const colorDifferenceThreshold = options.colorDifferenceThreshold || 0;
			// 	const useNeighborhoodCheck = options.useNeighborhoodCheck !== undefined ? options.useNeighborhoodCheck : true;
			// 	const neighborhoodThreshold = options.neighborhoodThreshold || 0.6;
			// 	const neighborhoodSize = options.neighborhoodSize || 1;
			// 	const replaceBackground = options.replaceBackground !== undefined ? options.replaceBackground : true; // 是否替换背景

			// 	// 预计算目标颜色的平方差分量
			// 	const { r: tr, g: tg, b: tb } = targetColorToReplace;
			// 	const { r: rr, g: rg, b: rb } = targetReplacementColor;
			// 	const { r: br, g: bg, b: bb } = backgroundColor;

			// 	// 超参数：连续匹配像素的最小数量，用于批量处理
			// 	const BATCH_MIN_LENGTH = 4;

			// 	// 直接在原始数据上操作
			// 	for (let y = 0; y < height; y++) {
			// 		let batchStart = -1;
			// 		let batchLength = 0;
			// 		let isTargetBatch = false; // 标记是否为目标颜色的批量

			// 		for (let x = 0; x < width; x++) {
			// 			const i = (y * width + x) * 4;
			// 			const a = data[i + 3];

			// 			// 跳过透明像素
			// 			if (a === 0) {
			// 				processBatch();
			// 				continue;
			// 			}

			// 			const r = data[i];
			// 			const g = data[i + 1];
			// 			const b = data[i + 2];

			// 			// 内联颜色差异计算
			// 			const dr = r - tr;
			// 			const dg = g - tg;
			// 			const db = b - tb;
			// 			const distanceSquared = dr * dr + dg * dg + db * db;

			// 			// 检查是否在阈值范围内
			// 			const isMatch = distanceSquared <= colorDifferenceThreshold * colorDifferenceThreshold;

			// 			if (isMatch) {
			// 				// 开始或延续目标颜色批量处理
			// 				if (batchStart === -1) {
			// 					batchStart = x;
			// 					isTargetBatch = true;
			// 				} else if (!isTargetBatch) {
			// 					// 如果之前是背景批量，先处理掉
			// 					processBatch();
			// 					batchStart = x;
			// 					isTargetBatch = true;
			// 				}
			// 				batchLength++;
			// 			} else {
			// 				// 如果当前是非目标颜色
			// 				if (replaceBackground) {
			// 					// 替换为背景颜色
			// 					data[i] = br;
			// 					data[i + 1] = bg;
			// 					data[i + 2] = bb;
			// 				}
			// 				// 结束当前批量并处理
			// 				processBatch();
			// 			}
			// 		}

			// 		// 处理行末的剩余批量
			// 		processBatch();

			// 		// 局部函数：处理连续匹配的像素批量
			// 		function processBatch() {
			// 			if (batchStart >= 0 && batchLength > 0) {
			// 				if (isTargetBatch) {
			// 					if (batchLength >= BATCH_MIN_LENGTH) {
			// 						// 大批次：直接替换整个区域（不考虑邻域）
			// 						for (let bx = batchStart; bx < batchStart + batchLength; bx++) {
			// 							const bi = (y * width + bx) * 4;
			// 							data[bi] = rr;
			// 							data[bi + 1] = rg;
			// 							data[bi + 2] = rb;
			// 						}
			// 					} else {
			// 						// 小批次：逐个像素处理（考虑邻域）
			// 						for (let bx = batchStart; bx < batchStart + batchLength; bx++) {
			// 							const bi = (y * width + bx) * 4;

			// 							if (useNeighborhoodCheck) {
			// 								// 快速邻域检查（简化版）
			// 								let matchCount = 0;
			// 								let totalCount = 0;

			// 								for (let dy = -neighborhoodSize; dy <= neighborhoodSize; dy++) {
			// 									const ny = y + dy;
			// 									if (ny < 0 || ny >= height) continue;

			// 									for (let dx = -neighborhoodSize; dx <= neighborhoodSize; dx++) {
			// 										if (dx === 0 && dy === 0) continue;

			// 										const nx = bx + dx;
			// 										if (nx < 0 || nx >= width) continue;

			// 										const ni = (ny * width + nx) * 4;
			// 										const na = data[ni + 3];

			// 										if (na === 0) continue;

			// 										const nr = data[ni];
			// 										const ng = data[ni + 1];
			// 										const nb = data[ni + 2];

			// 										const ndr = nr - tr;
			// 										const ndg = ng - tg;
			// 										const ndb = nb - tb;
			// 										const ndist = ndr * ndr + ndg * ndg + ndb * ndb;

			// 										if (ndist <= colorDifferenceThreshold * colorDifferenceThreshold) {
			// 											matchCount++;
			// 										}
			// 										totalCount++;
			// 									}
			// 								}

			// 								// 根据邻域匹配度决定是否替换
			// 								if (totalCount === 0 || matchCount / totalCount >= neighborhoodThreshold) {
			// 									data[bi] = rr;
			// 									data[bi + 1] = rg;
			// 									data[bi + 2] = rb;
			// 								} else if (replaceBackground) {
			// 									// 如果不满足邻域条件且启用了背景替换，则替换为背景色
			// 									data[bi] = br;
			// 									data[bi + 1] = bg;
			// 									data[bi + 2] = bb;
			// 								}
			// 							} else {
			// 								// 不使用邻域检查，直接替换
			// 								data[bi] = rr;
			// 								data[bi + 1] = rg;
			// 								data[bi + 2] = rb;
			// 							}
			// 						}
			// 					}
			// 				}

			// 				// 重置批量计数器
			// 				batchStart = -1;
			// 				batchLength = 0;
			// 				isTargetBatch = false;
			// 			}
			// 		}
			// 	}

			// 	// 应用修改后的图像数据
			// 	ctx.putImageData(imageData, 0, 0);

			// 	return canvas;
			// }

			// // 辅助函数：十六进制转RGB (优化版)
			// function hexToRgb(hex) {
			// 	const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
			// 	hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
			// 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
			// 	return result ? {
			// 		r: parseInt(result[1], 16),
			// 		g: parseInt(result[2], 16),
			// 		b: parseInt(result[3], 16)
			// 	} : { r: 0, g: 0, b: 0 };
			// }
			function modifyTileColor(image, options = {}) {
				// 创建主 Canvas 用于最终结果
				const canvas = document.createElement('canvas');
				canvas.width = image.width;
				canvas.height = image.height;
				const ctx = canvas.getContext('2d');

				// 创建背景层
				const backgroundCanvas = document.createElement('canvas');
				backgroundCanvas.width = image.width;
				backgroundCanvas.height = image.height;
				const bgCtx = backgroundCanvas.getContext('2d');

				// 配置选项
				const backgroundColor = options.backgroundColor || '#3E549C';

				// 1. 在背景 Canvas 上绘制背景色
				bgCtx.fillStyle = backgroundColor;
				bgCtx.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);

				// 2. 在主 Canvas 上绘制背景层
				ctx.drawImage(backgroundCanvas, 0, 0);

				// 3. 创建滤镜层 Canvas
				const filterCanvas = document.createElement('canvas');
				filterCanvas.width = image.width;
				filterCanvas.height = image.height;
				const filterCtx = filterCanvas.getContext('2d');

				// 4. 在滤镜层应用灰度和反色滤镜
				filterCtx.filter = 'grayscale(1) invert(1)';
				filterCtx.drawImage(image, 0, 0);

				// 5. 设置透明度并绘制到主 Canvas
				ctx.globalAlpha = 0.5;
				ctx.drawImage(filterCanvas, 0, 0);

				// 6. 重置上下文状态（可选）
				ctx.globalAlpha = 1;

				return canvas;
			}

			let layer1 = new TileLayer({
				source: new XYZ({
					url: url_Vector,
					wrapX: false,
					tileLoadFunction: function (tile, src) {
						const img = new Image();
						img.crossOrigin = 'anonymous';
						img.src = src;
						img.onload = function () {
							const modifiedCanvas = modifyTileColor(img);
							tile.getImage().src = modifiedCanvas.toDataURL();
						};
						img.onerror = function () {
							tile.setState(TileState.ERROR);
						};
					}
				}),

			})
			this.layers.push(layer1)


			const map = new Map({
				target: 'container',
				layers: [layer1],
				controls: [],
				view: new View({
					projection: "EPSG:3857",
					center: fromLonLat(this.mainCenter),
					zoom: 7.6,
					// constrainResolution: true,
					smoothResolutionConstraint: false,
					minZoom: 7,
					maxZoom: 18
				})
			});

			that.map = map

		},
		initMark() {
			const url_Vector_MARK = "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" + this.key
			let layer2 = new TileLayer({
				source: new XYZ({
					url: url_Vector_MARK,
					wrapX: false

				}),
			})
			this.map.addLayer(layer2)
		},

		async initMap() {
			return this.initTiandituMap()
		},
		//根据屏幕大小自动计算Echart图标内字体大小
		autoFontSize(res) {
			let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			if (!clientWidth) return;
			let fontSize = 100 * (clientWidth / 1920);
			return res * fontSize;
		},


		//切换地图图层
		changeLayerShowType() {

			if (this.map == undefined) {
				return
			}
			if (this.layers.length < 2) {
				const url_Vector = "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + this.key

				let layer = new TileLayer({
					source: new XYZ({
						url: url_Vector,
						wrapX: false,

					}),

				})
				this.layers.push(layer)
			}
			if (this.layerShowType != 'baseDT') {
				this.map.getLayers().setAt(0, this.layers[1]);
			}
			else {
				this.map.getLayers().setAt(0, this.layers[0]);
			}

		},
		// //获取企业点位信息
		// getComData() {
		// 	getMapComData().then(res => {
		// 		this.companyTableList = res.data;
		// 		this.setmapPointMarkers();
		// 	}).catch(error => {

		// 	});
		// },

		openInfoWindow(e) {
			var name = e.get('name')
			var address = e.get('address')
			var regionId = e.get('regionId')
			const info = []
			//标题
			info.push('<div style="width: 250px;height: 30px;line-height:30px;padding:0px 0px 0px 10px;color:#ffffff;border-radius: 5px 5px 0 0;background-color:#00aaff;opacity: 0.9;font-size: 16px;">概要信息<span id="infoWindow" style="width:40px;text-align: center;float:right;" onclick="window.carscreen.closeInfoWindow()">x</span></div>');
			//内容-start
			info.push('<div style="width: 250px;height: auto;padding:10px;border-radius: 0px 0px 5px 5px;background-color:#003c5a;opacity: 0.9;font-size: 14px;display: flex;flex-direction: column;">');

			info.push('<div id="" style="width: 100%;color:#00aaff;height: auto;">名称：');
			info.push('<span style="color:#56d9c8;">' + name + '</span>');
			info.push('</div>');

			info.push('<div id="" style="width: 100%;color:#00aaff;height: auto;margin-top:5px;">地址：');
			info.push('<span style="color:#56d9c8;">' + address + '</span>');
			info.push('</div>');
			info.push('</div>');

			var element = document.createElement('div');
			element.className = 'ol-popup';
			element.innerHTML = info.join("");
			element.style.cursor = 'pointer'; // 设置鼠标悬停时变为手型

			// 创建 OpenLayers 的 Overlay 对象
			var overlay = new Overlay({
				element: element,
				positioning: 'bottom-center',
				stopEvent: true,
				offset: [0, -10],
			});
			var coordinate = e.getGeometry().getCoordinates();
			overlay.setPosition(coordinate);
			this.map.addOverlay(overlay);
			this.overlay = overlay

		},
		closeInfoWindow() {
			this.map.removeOverlay(this.overlay);
		},

		//获取各区企业数据统计
		setAreaData(res) {
			var dataObj = res.data.countyMap;
			var totalCount = 0;
			var dataSource = [];
			var tempData = Object.keys(dataObj).map(key => {
				//return { [key]: obj[key] };
				var subTempData = {
					"name": [key],
					"value": dataObj[key],
				}
				dataSource.push(subTempData);
				totalCount = totalCount + dataObj[key];
			});
			//var totalCount = 550;
			//var dataSource = [{"id":"0","name":"东丽","value":128},{"id":"1","name":"西青","value":96},{"id":"2","name":"津南","value":168},{"id":"3","name":"北辰","value":158},{"id":"4","name":"滨海新区","value":128},{"id":"5","name":"宁河","value":96},{"id":"6","name":"静海","value":168},{"id":"7","name":"武清","value":158},{"id":"8","name":"宝坻","value":168},{"id":"9","name":"蓟州","value":158}];
			this.drawAreaDataChart(totalCount, dataSource);
		},
		drawAreaDataChart(totalCount, dataSource) {
			if (this.areaDataChart != null && this.areaDataChart != "" && this.areaDataChart != undefined) {
				this.areaDataChart.dispose();
			};
			this.areaDataChart = echarts.init(document.getElementById('areaDataDiv'));
			this.areaDataChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i = 0; i < dataSource.length; i++) {
							if (dataSource[i].name == name) {
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				title: {
					text: "",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: '14px'
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '各区企业',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['0%', '60%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#00aaff',
							formatter: function (params) {
								var percent = 0;
								if ((totalCount > 0) && (params.data.value > 0)) {
									percent = Math.round(params.data.value / totalCount * 100);
								}
								return params.data.name + ":" + params.data.value + "(" + percent + '%)'; //
							}
						},
						labelLine: {
							show: true,
							showAbove: false,
							length: 15,
							length2: 35
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '14',
								color: '#ffaa00'
							}
						},
						data: dataSource
					}
				]
			});
		},

		drawIndustryDataChart(totalCount, dataSource) {
			if (this.industryDataChart != null && this.industryDataChart != "" && this.industryDataChart != undefined) {
				this.industryDataChart.dispose();
			};
			this.industryDataChart = echarts.init(document.getElementById('industryDataDiv'));
			this.industryDataChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i = 0; i < dataSource.length; i++) {
							if (dataSource[i].name == name) {
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				title: {
					text: "",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: '14px'
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '各行业企业',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['0%', '60%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#ffaa00',
							formatter: function (params) {
								var percent = 0;
								if ((totalCount > 0) && (params.data.value > 0)) {
									percent = Math.round(params.data.value / totalCount * 100);
								}
								return params.data.name + ":" + params.data.value + "(" + percent + '%)'; //
							}
						},
						labelLine: {
							show: true,
							showAbove: false,
							length: 15,
							length2: 35
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '14',
								color: '#00ffff'
							}
						},
						data: dataSource
					}
				]
			});
		},

		//近一周上报统计
		setWeekData() {
			getWeekData(this.searchRegion).then(res => {
				var dataList = res.data;
				var nameArray = [];
				var dataArray = [];
				for (var i = 0; i < dataList.length; i++) {
					nameArray.push(dataList[i].name.split("-")[1] + "-" + dataList[i].name.split("-")[2]);
					dataArray.push(dataList[i].value);
				}
				this.drawWeekDataChart(nameArray, dataArray);
			}).catch(error => {

			});
		},
		drawWeekDataChart(nameArray, dataArray) {
			if (this.weekDataChart != null && this.weekDataChart != "" && this.weekDataChart != undefined) {
				this.weekDataChart.dispose();
			};
			this.weekDataChart = echarts.init(document.getElementById('weekDataDiv'));
			this.weekDataChart.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						//type: 'shadow'
					},
					backgroundColor: 'rgba(30, 54, 124,0.8)',
					borderWidth: '2',
					borderRadius: '5',
					borderColor: 'rgba(30, 159, 255,0.5)',
					textStyle: {
						color: '#ffffff'
					},
					formatter: function (params) {
						//return params[0].name + "：" + params[0].value + "";
						return params[0].name + '</br >进场数：' + params[0].value;
					}

				},
				grid: {
					top: '18%',
					left: '10%',
					right: '5%',
					bottom: '20%',
					zlevel: 1
				},
				xAxis: [
					{
						type: 'category',
						data: nameArray,
						axisLine: {
							lineStyle: {
								color: '#00aaff'
							}
						},
						axisLabel: {
							show: true,
							interval: 0,
							rotate: 0,
							color: '#00ffff',
							fontSize: this.autoFontSize(0.12),
						},
						splitLine: {
							lineStyle: {
								color: '#436ed0'
							}
						}
					},
				],
				yAxis:
					[
						{
							type: 'value',
							name: '进场数',
							position: 'left',
							alignTicks: true,
							nameTextStyle: {
								fontSize: this.autoFontSize(0.12),
							},
							//minInterval: 1,
							axisLine: {
								show: true,
								lineStyle: {
									color: '#00aaff'
								}
							},
							axisLabel: {
								show: true,
								color: '#00aaff',
								fontSize: this.autoFontSize(0.12),
								formatter: function (value, index) {
									return value;
								}
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: '#436ed0',
									opacity: 0.1
								}
							}
						},
					],
				series:
					[
						{
							name: '进场数',
							data: dataArray,
							type: 'line',
							barWidth: this.autoFontSize(0.15),
							itemStyle: {
								color: "#00ffff"
							},
							areaStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{ offset: 0, color: 'rgba(0, 255, 255, 0.3)' },                   //柱图渐变色
										{ offset: 0.3, color: 'rgba(0, 255, 255, 0.2)' },                   //柱图渐变色
										{ offset: 1, color: 'rgba(0, 255, 255, 0.1)' },                   //柱图渐变色
									]
								),
							}
						},
					]

			});
		},
		//获取上报数和企业进出排名top
		setReportDataAndTop() {
			const now = new Date();
			const startOfDay = new Date(now);
			startOfDay.setHours(0, 0, 0, 0); // 当日0点

			const endOfDay = new Date(now);
			endOfDay.setDate(endOfDay.getDate() + 1); // 日期加一天
			endOfDay.setHours(0, 0, 0, 0); // 次日0点（即当日24点）

			// 格式化日期为YYYY-MM-DD HH:MM:SS格式
			const formatDateTime = (date) => {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			};

			const stTime = formatDateTime(startOfDay); // 当日0点
			const edTime = formatDateTime(endOfDay);   // 当日24点（次日0点）

			// 添加参数到请求中
			let request = { stTime: stTime, edTime: edTime };
			getReportDataAndTop(request).then(res => {
				this.shangbaojiluCount = Math.floor(res.data.total / 10000);
				// this.dangrishangbaoCount = res.data.today;
				this.setTodayInData(res);
			}).catch(error => {

			});
		},
		setTodayInData(res) {
			var nameArray = [];
			var dataArray = [];
			var dataList = res.data;
			for (var i = (dataList.length - 1); i >= 0; i--) {
				nameArray.push(dataList[i].name);
				dataArray.push(dataList[i].value);
				if (i == 0) {
					this.drawTodayInDataChart(nameArray, dataArray);
				}
			}


		},
		drawTodayInDataChart(nameArray, dataArray) {
			if (this.todayInDataChart != null && this.todayInDataChart != "" && this.todayInDataChart != undefined) {
				this.todayInDataChart.dispose();
			};
			this.todayInDataChart = echarts.init(document.getElementById('todayInDataDiv'));
			this.todayInDataChart.setOption({
				tooltip: {
					show: false,
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						//type: 'shadow'
					},
					backgroundColor: 'rgba(30, 54, 124,0.8)',
					borderWidth: '2',
					borderRadius: '5',
					borderColor: 'rgba(30, 159, 255,0.5)',
					textStyle: {
						color: '#ffffff'
					},
					formatter: function (params) {
						//return params[0].name + "：" + params[0].value + "";
						return params[0].name + '</br >进场数：' + params[0].value;
					}

				},
				grid: {
					top: '5%',
					left: '50%',
					right: '10%',
					bottom: '5%',
					zlevel: 1
				},
				xAxis: [
					{
						type: 'value',
						name: '',
						alignTicks: true,
						nameTextStyle: {
							fontSize: this.autoFontSize(0.12),
						},
						//minInterval: 1,
						axisLine: {
							show: false,
							lineStyle: {
								color: '#00aaff'
							}
						},
						axisLabel: {
							show: false,
							color: '#00aaff',
							fontSize: this.autoFontSize(0.12),
							formatter: function (value, index) {
								return value;
							}
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#436ed0',
								opacity: 0.1
							}
						}
					},
				],
				yAxis:
					[
						{
							type: 'category',
							data: nameArray,
							//position: 'left',
							axisLine: {
								show: true,
								lineStyle: {
									color: '#00aaff'
								}
							},
							axisTick: {
								show: true,
							},
							axisLabel: {
								show: true,
								interval: 0,
								rotate: 0,
								color: '#00ffff',
								inside: false,
								//margin: 80,
								fontSize: this.autoFontSize(0.12),
							},
							splitLine: {
								show: false,
								lineStyle: {
									color: '#436ed0'
								}
							}
						},
					],
				series:
					[
						{
							name: '进场数',
							data: dataArray,
							type: 'bar',
							barWidth: this.autoFontSize(0.1),
							label: {
								show: true,
								position: 'right',
								color: '#ffaa00',
								formatter: function (obj, index) {
									return (obj.value);
								}
							},
							emphasis: {
								focus: 'series'
							},
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 0, 1, 0,
									[
										//柱图渐变色
										{ offset: 1, color: 'rgba(0, 255, 255, 0.6)' },
										{ offset: 0.5, color: 'rgba(0, 255, 255, 0.3)' },
										{ offset: 0, color: 'rgba(0, 255, 255, 0.1)' },
									],
								),
								borderRadius: [5, 5, 5, 5]
							}
						},
					]
			});
		},
		setStageData() {
			getStageData().then(res => {
				var dataList = res.data;
				var totalCount = 0;
				for (var i = 0; i < dataList.length; i++) {
					totalCount = totalCount + dataList[i].value;
				}
				this.drawStageDataChart(totalCount, dataList);
			}).catch(error => {

			});

			//var totalCount = 550;
			//var dataSource = [{"id":"0","name":"新能源","value":128},{"id":"1","name":"国六","value":96},{"id":"2","name":"国五","value":168},{"id":"3","name":"国四","value":158},{"id":"4","name":"国三","value":128},{"id":"6","name":"其他","value":168}];
			//this.drawStageDataChart(totalCount,dataSource);
		},
		drawStageDataChart(totalCount, dataSource) {
			if (this.stageDataChart != null && this.stageDataChart != "" && this.stageDataChart != undefined) {
				this.stageDataChart.dispose();
			};
			this.stageDataChart = echarts.init(document.getElementById('stageDataDiv'));
			this.stageDataChart.setOption({
				legend: {
					show: false,
					top: '10%',
					left: '10%',
					orient: 'vertical',
					itemGap: 15,
					textStyle: {
						color: '#ffffff'
					},
					formatter(name) {
						var curVlaue = 0;
						for (var i = 0; i < dataSource.length; i++) {
							if (dataSource[i].name == name) {
								curVlaue = dataSource[i].value;
							}
						}
						return name + " " + curVlaue + "家";
					}
				},
				grid: {
					top: '15%',
					left: '10%',
					right: '5%',
					bottom: '5%',
					zlevel: 1
				},
				title: {
					text: "",
					left: 'center',
					textStyle: {
						color: '#ffaa00',
						fontWeight: 'normal',
						fontSize: '14px'
					},
					//backgroundColor: '#4367ba'
					//backgroundColor: '-webkit-linear-gradient(left,#071f56,#4367ba,#071f56)',
				},
				series: [
					{
						name: '各行业企业',
						type: 'pie',
						roseType: false,
						//left: '30%',
						radius: ['0%', '70%'],
						itemStyle: {
							borderRadius: 5,
							//borderColor: '#436ed0',
							borderWidth: 0
						},
						label: {
							show: true,
							position: 'outside',
							fontSize: this.autoFontSize(0.12),
							color: '#ffaa00',
							formatter: function (params) {
								var percent = 0;
								if ((totalCount > 0) && (params.data.value > 0)) {
									percent = (params.data.value / totalCount * 100).toFixed(1);
								}
								return params.data.name + ": " + params.data.value + "(" + percent + '%)'; //
							}
						},
						labelLine: {
							show: true,
							showAbove: false,
							length: 15,
							length2: 25
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '14',
								color: '#00ffff'
							}
						},
						data: dataSource
					}
				]
			});
		},

		//设置企业告警数据
		setWarningComData() {
			getWarningComData().then(res => {

				this.warningComDataList = res.data;
			}).catch(error => {

			});
			var warningComDataListTest = [
				{
					"SBL": "78",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称1"
				},
				{
					"SBL": "79",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称2"
				},
				{
					"SBL": "68",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称3"
				},
				{
					"SBL": "56",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称4"
				},
				{
					"SBL": "75",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称5"
				},
				{
					"SBL": "77",
					"time": "2024-12-18 23:28:59",
					"comName": "测试企业名称测试企业名称6"
				}
			]
		},
		//企业详情弹窗
		openComDetailDialog(regionId) {
			this.isShowMyDialog = true
			this.MyDiaList = { regionId: regionId }
		},

		openCarDetailFromWarning(item) {
			alert(item.subject);
			this.carDialogParams.objRecord = item;
			this.carDialogParams.dialogVisible = true;
		},

	},
}
</script>

<style>
.line-post-page {
	width: calc(100vw - 1260px);
	z-index: 1000;
	height: 169px;
	position: fixed;
	left: 530px;
	bottom: 5px;

	div {
		width: calc(100vw - 1060px);
		height: 100%;
	}
}

/* 导航栏和标题的设置*/
.nav-menu {
	display: flex;
	align-items: center;
	/* 使导航项在垂直方向上居中 */
	/* 可以根据需要调整与其他元素的间距 */
}

.nav-item {
	text-decoration: none;
	color: #fff;
	display: inline-block;
	/* 导航项之间的水平间距 */
	padding: 5px 10px;
	/* 增加内边距，使导航项更美观且点击区域更大 */
	transition: all 0.2s ease;
	/* 添加过渡效果，使样式变化更平滑（可选） */
}

.nav-item:active,
.nav-item:hover,
.nav-item:focus {
	color: #fff;
	text-decoration: none;
	background-color: transparent;
	outline: none;
}

.active-nav {
	background-image: url("~@/assets/image/activate.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	/* 添加这一行，使背景图在水平和垂直方向都居中 */

}

.el-dialog__body {
	padding: 0px 20px 20px 20px;
}

::-webkit-scrollbar {
	/*width: 0;宽度为0隐藏*/
	height: 6px;
	width: 3px;
}

::-webkit-scrollbar-thumb {
	border-radius: 2px;
	height: 50px;
	background-color: #00aaff;
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 0px;
	/*background-color: rgba(62, 106, 181, 0.8);*/
	background-color: rgba(0, 170, 255, 0.2);
}

.amap-logo {
	display: none;
	opacity: 0 !important;
}

.amap-copyright {
	opacity: 0;
}

.amap-marker-label {
	position: absolute;
	z-index: 2;
	border: 0px solid blue;
	background-color: rgba(31, 107, 134, 0.8);
	color: #ffaa00;
	white-space: nowrap;
	cursor: default;
	padding: 3px;
	font-size: 12px;
	line-height: 14px;
}
</style>
<style scoped lang="scss">
::v-deep .el-select__input {
	color: white !important;
}


.input-select {
	position: absolute;
	z-index: 1;
	right: 45vw;
	top: 9vh;
	border-radius: 5px;
	display: flex;
}

.input-cascader {
	position: absolute;
	z-index: 1;
	right: 60vw;
	top: 9vh;

	border-radius: 5px;
	display: flex;
}

.map_menu1 {
	position: absolute;
	z-index: 1;
	right: 25vw;
	bottom: 18vh;
	/*
		background-color: rgba(97, 118, 131, 1);
		*/
	border-radius: 5px;
	display: flex;
}

.map_menu {
	position: absolute;
	z-index: 1;
	right: 32vw;
	bottom: 1vh;
	/*
		background-color: rgba(97, 118, 131, 1);
		*/
	border-radius: 5px;
	display: flex;
}

.bigScreenBodyDiv {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: no-repeat center top;
	background-size: cover;
	// background: rgba(4, 9, 28, 1);
	// background-color: rgb(70, 99, 153);
	// background-color:white
	// background-color: rgb(0, 0, 1);
	//background-color: rgb(67, 95, 143);
	background-color: #172349;
	// background-image: linear-gradient(0deg, #17a1f000 0%, #0f94a22b 100%);

}

.bigScreenHeader {
	width: 100%;
	height: 60px;
	display: flex;
	z-index: 1;
	color: #333;
	text-align: center;
}

.bigScreenBodyDivMain {
	flex: 1;
	width: 100%;
	display: flex;
	// background-color: #0f93a249;
	// background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(23, 161, 240, 0)), to(rgba(15, 148, 162, 0.168627451)));

}

.mappanel {
	background-color: rgba(27, 111, 250, 0);
	border: 0px solid rgba(27, 111, 250, 0.3) !important;
}

.outpanel {
	background-color: rgba(27, 111, 250, 0);
	border: 1px solid rgba(27, 111, 250, 0.3) !important;
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}

.inpanel {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
	background-color: rgba(27, 111, 250, 0);
}

.leftinpanel {
	border: 1px solid rgba(34, 170, 211, 0.8);
	border-image: -webkit-linear-gradient(top left, #00aaff 25%, rgba(27, 111, 250, 0.3) 50%, rgba(27, 111, 250, 0) 75%, rgba(27, 111, 250, 0) 95%) 10 10 10 10;
}

.rightinpanel {
	border: 1px solid rgba(34, 170, 211, 0.8);
	border-image: -webkit-linear-gradient(top right, #00aaff 25%, rgba(27, 111, 250, 0.3) 50%, rgba(27, 111, 250, 0) 75%, rgba(27, 111, 250, 0) 95%) 10 10 10 10;
}

.inpanel-title {
	width: 100%;
	height: 1.875rem;
	display: flex;
	padding-left: 1rem;
	background-color: rgba(27, 111, 250, 0);
	border: 0px solid rgba(27, 111, 250, 0.3) !important;
	border-bottom: 0px solid rgba(27, 111, 250, 0.5) !important;

}

.inpanel-title-left {
	width: 40%;
	height: 100%;
	text-align: left;
	line-height: 1.875rem;
	font-size: 0.875rem;
	color: #ffffff;
}

.inpanel-title-center {
	flex: 1;
	height: 100%;
	padding: 0.1875rem;
	line-height: 1.5rem;
	text-align: right;
}

.inpanel-title-right {
	width: 140px;
	height: 100%;
	/*
		line-height: 1.5rem;
		*/
	padding: 0rem 0.65rem;
	text-align: right;
	line-height: 1.875rem;
	font-size: 0.875rem;
	color: #ffffff;
}

.iconmore {
	color: #00B0FF;
	padding-right: 0.3125rem;
}

.el-checkbox__inner {
	background-color: rgba(0, 49, 72, 0.8);
	border: 1px solid rgba(0, 82, 120, 0.8);
}

.home_div {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	position: relative;
}

#container {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: calc(100% - 0px);
	position: absolute;
	z-index: 0;
}

.map_alerm {
	position: absolute;
	z-index: 1;
	width: 30%;
	height: 150px;
	left: 35%;
	bottom: 10px;
	background-image: linear-gradient(to bottom, rgba(11, 58, 87, 0.8), rgba(11, 58, 87, 0.7), rgba(11, 58, 87, 0.7), rgba(11, 58, 87, 0.8), rgba(11, 58, 87, 0.8), rgba(11, 58, 87, 0.8), rgba(11, 58, 87, 0.9), rgba(11, 58, 87, 0.9), rgba(11, 58, 87, 0.9));
	border-radius: 5px;
	display: flex;
}

.map_left {
	position: absolute;
	z-index: 1;
	height: 100%;
	left: 0px;
	border-radius: 5px;
	// box-shadow: inset 0 0 1.77083vw #276288bd;
	// background-image: linear-gradient(to left, rgba(9, 21, 42, 0), rgba(9, 21, 42, 0.3), rgba(9, 21, 42, 0.6), rgba(9, 21, 42, 0.8), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1));
}

.map_right {
	position: absolute;
	// box-shadow: inset 0 0 1.77083vw #276288bd;

	z-index: 1;
	width: 25%;
	height: 100%;
	right: 0px;
	// background-image: linear-gradient(to right, rgba(9, 21, 42, 0), rgba(9, 21, 42, 0.3), rgba(9, 21, 42, 0.6), rgba(9, 21, 42, 0.8), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1));

	border-radius: 5px;
	// box-shadow: inset 0 0 1.77083vw #276288bd;
	// background-color: transparent;
	// background-image: linear-gradient(to right, rgba(9, 21, 42, 0.6), rgba(9, 21, 42, 0.6), rgba(9, 21, 42, 0.6), rgba(9, 21, 42, 0.8), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1), rgba(9, 21, 42, 1));


}

.enterprise-search-container {
	width: 300px;
	background-color: #1c2732;
	/* 深色背景色 */
	color: white;
	/* 白色字体 */
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.search-bar {
	display: flex;
	align-items: center;
	background-color: #283545;
	/* 搜索框背景色 */
	padding: 8px 12px;
	border-bottom: 1px solid #334155;
}

.search-bar input {
	width: 100%;
	background: transparent;
	border: none;
	color: white;
	outline: none;
}

.enterprise-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
	max-height: 300px;
	/* 可根据需要调整最大高度 */
	overflow-y: auto;
	/* 出现内容过多时显示纵向滚动条 */
}

.enterprise-list li {
	padding: 8px 12px;
	cursor: pointer;
}

.enterprise-list li:hover {
	background-color: #283545;
	/* 鼠标悬停背景色 */
}

.blockTitle {
	width: 100%;
	height: 1.5vw;
	color: #ffffff;
	text-align: center;
	display: table;
	border-bottom: 1px solid rgba(34, 170, 211, 0.8);
	border-image: linear-gradient(to right, rgba(27, 111, 250, 0) 0%, rgba(27, 111, 250, 0.3) 25%, #00aaff 50%, rgba(27, 111, 250, 0.3) 75%, rgba(27, 111, 250, 0) 100%) 10 10 10 10;
}

.blockTitleText {
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	font-size: 0.8vw;
}

.map-lengend {
	position: absolute;
	right: 25vw;
	top: 10vh;
	z-index: 100;
	color: #9bc1d1;
	background: #00000055;
	padding: 15px;
	border-radius: 12px;

	.lengend-item {
		display: flex;
		padding: 5px 10px;
		cursor: pointer;

		.dot {
			width: 20px;
			height: 20px;
			display: inline-block;
			border-radius: 20px;
			margin-right: 10px;
		}
	}
}
</style>
<style>
.el-tree-node__expand-icon.expanded {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}


.el-tree-node__content {

	margin-bottom: 10px;

}

.el-tree-node__content:hover {
	background-color: transparent;
}

.el-tree-node:focus>.el-tree-node__content {
	background-color: #1E374F;
}

.el-input__inner {
	color: white;
	background: rgba(39, 98, 136, 0.7411764706);
}

.font-set {
	font-size: 18px;
	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
	font-weight: bold;
}

/* input::-webkit-input-placeholder {

	-webkit-text-fill-color: white;

} */
</style>
